<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="1"></reviewTabs>
          </view>
          <view class="box">
            <view class="list">
              <view
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="handleClickWord(index)"
              >
                <view class="item_title"> {{ item.chapterName }} </view>
                <view
                  class="item_text"
                  :class="{
                    color1: item.clickCount % 4 === 1,
                    color2: item.clickCount % 4 === 2,
                    color3: item.clickCount % 4 === 3,
                  }"
                >
                  <template v-if="item.clickCount % 4 === 0"> </template>
                  <template
                    v-else-if="
                      item.clickCount % 4 === 1 || item.clickCount % 4 === 2
                    "
                  >
                    {{ item.word }}
                  </template>
                  <template v-else-if="item.clickCount % 4 === 3">
                    {{ item.wordParaphrase }}
                  </template>
                </view>
                <view class="item_icon"> </view>
              </view>
            </view>
            <view class="btn">
              <view class="btn_content" @click="">
                <text>学新</text>
              </view>
              <view class="btn_content">
                <text>取消</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getWords, saveWordLearningRecord } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      type: "",
      list: [],
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.type = options.type;
    this.getData();
  },
  methods: {
    getData() {
      getWords("ltsfx", this.chapterId).then((res) => {
        let data = res.data;
        let arr = [];
        data.forEach((item) => {
          arr.push({
            chapterId: item.chapterId,
            chapterName: item.chapter.chapterName,
            word: item.word,
            wordParaphrase: item.wordParaphrase,
            clickCount: 0,
          });
        });
        this.list = arr;
      });
    },
    handleClickWord(index) {
      this.list[index].clickCount++;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review2List";
</style>
